 <!-- 广场 -->
<template>
	<z-paging-swiper>
		<template #top>
			<z-tabs ref="tabs" v-if="tabList.length>1"
			inactive-color="#3D3D3D"
			:inactive-style="{'font-size': '32rpx', 'font-weight': '400'}"
			active-color="#D98A47"
			:active-style="{'font-size': '34rpx', 'font-weight': '700'}"
			scroll-count="1" 
			:bottomLineIsShow="false" 
			:list="tabList"  
			:current="current"
			@change="tabsChange" />
		</template>
		<!-- swiper必须设置height:100%，因为swiper有默认的高度，只有设置高度100%才可以铺满页面 -->
		<swiper class="swiper" duration="0" :current="current" @transition="swiperTransition" @animationfinish="swiperAnimationfinish">
			<swiper-item class="swiper-item" @touchmove.stop="" v-for="(item, index) in tabList" :key="index">
				<smallTheater v-if="item.name == '小剧场'" :data="item" :tabIndex="index" :currentIndex="current" @onScroll="smallTheaterOnScroll"></smallTheater>
				<plotIntroduction v-if="item.name == '剧情介绍'" :data="item" :tabIndex="index" :currentIndex="current"></plotIntroduction>
				<storyContribute v-if="item.name == '故事投稿'" :data="item" :tabIndex="index" :currentIndex="current"></storyContribute>
				<dramaWallpaper v-if="item.name == '剧情墙纸'" :data="item" :tabIndex="index" :currentIndex="current"></dramaWallpaper>
			</swiper-item>
		</swiper>	
		<template #bottom>
			
			<!-- <suspensionLastVideo class="d-flex a-center j-center suspensionLastVideo"
			v-if="showLastVideo"
			:style="{'top': lastVideo_top + 'rpx'}"
			:videoData="lastTimeWatchVideo" @closeLastVideo="closeLastVideoFn">
			</suspensionLastVideo> -->
			<view class="d-flex a-center j-center suspensionLastVideo" v-if="showLastVideo" :style="{'top': lastVideo_top + 'rpx'}">
				<view class="content d-flex flex-row a-center j-center px-1">
					<view class="d-flex cover a-center j-center flex-shrink">
						<image class="d-flex image rounded10 ml-1" :src="lastTimeWatchVideo.cover" mode="scaleToFill"></image>
					</view>
					<view class="d-flex textMain flex-column j-sb flex-1 px-2">
						<text class="ellipsis text-white font-md2 mb" style="width: 320rpx;">{{lastTimeWatchVideo.name}}</text>
						<text class="ellipsis text-white font-sm3" style="width: 320rpx;">上次看到第{{lastTimeWatchVideo.playlet_number}}集</text>
					</view>
					<view class="d-flex flex-shrink rechargeBtn a-center j-center bg-gradual-orange-n rounded80" @tap.stop="clickToSelf">
						<text class="d-flex text-white font-sm3">继续观看</text>
					</view>
					<view class="d-flex flex-shrink a-center j-center" style="width: 60rpx;height: 60rpx;" @tap.stop="closeLastVideoFn">
						<text class="d-flex iconfont icon-guanbi2 text-white font-weight font-md"></text>
					</view>
				</view>
			</view>
			
			
			
			<!-- 赠送币提示 -->
			<u-popup :show="gcTipsPopup" mode="center" bgColor="transparent" overlayOpacity="0.8" closeable @close="gcTipsPopup=false"
				:closeOnClickOverlay="false" round="10">
				<view class="d-flex px-3 pb-5 flex-column rounded20 overhide a-center j-center bg-white"
					style="width: 620rpx;">
					<text class="d-flex a-center j-center font-md5 font-weight text-black9" style="height: 50px;">补偿提示</text>
					<text class="d-flex font-md2 font-weight text-black9 text-justify text-indent30" style="line-height: 48rpx;">{{gcTipsContent}}</text>
					<view class="d-flex flex-row flex-nowrap j-sb mt-3">
						<view class="d-flex bg-gradual-orange-n a-center j-center rounded60 font-md3"
							style="width: 500rpx;height: 92rpx;" @tap.stop="giveSure()">
							<text class="d-flex text-white font-weight">领取补偿</text>
						</view>
					</view>
				</view>
			</u-popup>
		</template>
	</z-paging-swiper>			
</template>

<script>
	let that;
	import {
		mapState
	} from 'vuex';
	import smallTheater from "../../tabBar/square/smallTheater/smallTheater.vue"
	import plotIntroduction from "../../tabBar/square/plotIntroduction/plotIntroduction.vue"
	import storyContribute from "../../tabBar/square/storyContribute/storyContribute.vue"
	import dramaWallpaper from "../../tabBar/square/dramaWallpaper/dramaWallpaper.vue"
	
	// import suspensionLastVideo from "../../tabBar/square/suspension/suspension_lastVideo.vue"
	
	import interfaces from '@/utils/interfaces.js'
	import config from '@/utils/config.js'
	import tools from '@/utils/tools.js'
	
	export default {
		components:{
			smallTheater,
			plotIntroduction,
			storyContribute,
			dramaWallpaper
			// suspensionLastVideo
		},
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				openid: state => state.user.openid,
				statusBarHeight: state => state.layout.statusBarHeight,
				windowWidth: state => state.layout.windowWidth,
				windowHeight: state => state.layout.windowHeight,
				platform: state => state.layout.platform
			})
		},
		watch: {
			openid: {
				handler(newVal) {
					if(newVal){
						this.getvdlist();
					}
				},
				deep:true,
				immediate:true
			},
		},
		data() {
			return {
				
				gcTipsContent:'由于早上小程序后台升级问题，导致了出现了服务器拥挤情况，导致您无法正常观看剧集。对此我们深感抱歉，给您造成了非常不好的观看体验！感谢您一直以来对我们的理解与包容，为表达我们的歉意，同时感谢您的耐心等待，稍后对您奉上200看币的补偿。',
				gcTipsPopup: false,//赠送币提示
				
				tabList:[],
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				
				lastVideo_top:0,
				showActivity: false,
				showLastVideo: false,
				showFullLastVideo: true,
				showAddSmallProgramTip: false,
				smallTheaterMonitorOnPageScrollTimer:null, //小剧场监控页面滚动计时器
				lastTimeWatchVideo: {},  // 上次观看视频
			};
		},
		onLoad() {
			console.log(134,)
			that = this;
			console.warn('首页onLoadonLoadonLoadonLoad');
			this.initData(); //初始化数据
			// this.addSmallProgramTipOperation()
		},
		onShow() {
			this.requestBlockListData();
			uni.setNavigationBarTitle({title: '广场'});
			this.lastTimeWatchVideo = tools.get_history_last_item();
			console.warn('==获取观看历史==');
			console.log(this.lastTimeWatchVideo);
			if(this.current === 0){
				if (typeof this.lastTimeWatchVideo=='object' && this.lastTimeWatchVideo!=null) {
					if(JSON.stringify(this.lastTimeWatchVideo)!='{}'){
						this.showLastVideo = true;
						return
					}
				}
				this.showLastVideo = false;
			}
		},
		methods: {
			clickToSelf() { //继续观看
				console.log(32)
				// if (Object.keys(this.videoData).length > 0) {
				// 	let data = {playlet_id:this.videoData.video_info.playlet_id,
				// 	            name:this.videoData.video_info.name, 
				// 				playlet_number:this.videoData.video_info.playlet_number,
				// 		        last_episode_number:this.videoData.video_info.last_episode_number}
				// 	tools.jump_video_page_by_info(data)
				// }
				console.log(38,this.lastTimeWatchVideo)
				console.log(39,typeof this.lastTimeWatchVideo=='object',this.lastTimeWatchVideo!=null)
				if(typeof this.lastTimeWatchVideo=='object'&& this.lastTimeWatchVideo!=null){
					uni.navigateTo({
						url: '/pages/videopage/videopage?video_info='+encodeURIComponent(JSON.stringify(this.lastTimeWatchVideo))
					})
				}
			},
			closeLastVideoFn(){ // 关闭继续观看
				this.showLastVideo = false;
			},
			//tabs通知swiper切换
			tabsChange(index) {
				this.current = index;
				if (this.current == 0) {
					this.showActivity = true
					if (typeof this.lastTimeWatchVideo=='object' && this.lastTimeWatchVideo!=null) {
						if(JSON.stringify(this.lastTimeWatchVideo)!='{}'){
							this.showLastVideo = true;
						}
					} 
				} else {
					this.showActivity = false;
					this.showLastVideo = false;
				}
			},
			//swiper滑动中
			swiperTransition(e) {
				this.$refs.tabs.setDx(e.detail.dx);
			},
			//swiper滑动结束
			swiperAnimationfinish(e) {
				this.current = e.detail.current;
				this.$refs.tabs.unlockDx();
				if (this.current == 0) {
					this.showActivity = true
					if (this.lastTimeWatchVideo != null) {
						this.showLastVideo = true
					} 

				} else {
					this.showActivity = false
					this.showLastVideo = false
				}
			},
			//赠送币
			giveSure(){  //没用到
				//发起赠送币请求
				that.request({
					url: interfaces.give_coin,
					method: "POST",
					success: (r) => {
						if (r.code === config.SUCCESS) {
							console.warn('========赠送币成功=========');
							console.log(r);
						}else{
							console.warn('========赠送币失败=========');
							if(typeof r.message=='string'&&r.message){
								uni.showToast({title: r.message,duration: 2000,icon: "none",mask:false});
							}
						}
					}
				})
			},
			// 初始化数据
			initData() {
				let pxToRpxSacle = 750 / this.windowWidth;
				let kWindowHeight = this.windowHeight *  pxToRpxSacle;
				this.showActivity = true;
				this.lastVideo_top = kWindowHeight - 280 - 80 - 160;
				
				let spread_id = uni.getStorageSync('spread_id');
				console.log(this.platform);
				uni.getProvider({ // 获取供应商服务
					service: 'oauth',
					success: function(res) {
						console.log(res.provider);
						let type,provider;
						if (res.provider.indexOf('weixin')>-1) {
							provider = 'weixin';
							type = 1;
						} else if (res.provider.indexOf('toutiao')>-1) {
							provider = 'toutiao';
							type = 2;
						}
						console.log(254,provider);
						uni.login({
							provider: provider,
							success: function(loginRes) {
								console.warn('========登录小程序成功=========');
								console.log(259,loginRes);
								let getOpenidData;
								if(spread_id){
									getOpenidData = {login_code: loginRes.code,platform_type:that.platform,spread_id};
								}else{
									getOpenidData = {login_code: loginRes.code,platform_type:that.platform};
								}
								console.log(225,spread_id,getOpenidData)
								//发起网络请求
								that.request({
									url: interfaces.get_openid,
									method: "POST",
									data: getOpenidData,
									success: (r) => {
										if (r.code === config.SUCCESS) {
											console.warn('========登录账号成功=========');
											console.log(r);
											that.$store.commit("mut_openid", r.content.openid);
											if(typeof that.userInfo == 'object' && that.userInfo){
												if(JSON.stringify(that.userInfo)=='{}'){
													tools.get_user_info_by_serve(that, (res) => {})
												}
											}
											that.$nextTick(() => {
												console.log(242,r.content);
												uni.setStorageSync(config.coin_name, r.content.coin_name);
												uni.setStorageSync(config.session_key, r.content.session_key);
											})
										}else{
											console.warn('========登录账号失败=========');
											if(typeof r.message=='string'&&r.message){
												uni.showToast({title: r.message,duration: 2000,icon: "none",mask:false});
											}
										}
									}
								})
							},fail(err) {
								console.log(296,err)
							}
						});
					}
				});
			},
			getvdlist() { //获取追剧
				this.request({
					url: interfaces.chasing_list,
					method: config.post,
					data: {
					},
					success: (res) => {
						console.log("chasing_list",res)
						if (res.code === config.SUCCESS) {
							if (res.content.length > 0) {
								for (var i = 0; i < res.content.length; i++) {
									let playlet_id = res.content[i]
									//修改本地追剧
									tools.update_zhuiju(playlet_id, true, null, true)
								}
							}
						}
					}
				})
			},
			// 请求模块数据
			requestBlockListData() {
				console.warn('请求模块数据==requestBlockListData');
				that.request({
					url:interfaces.square_blockList,
					methods:"GET",
					success:(res)=> {
						console.warn('请求模块数据结果===');
						console.log(323,res);
						that.tabList = res.content;
					},
					fail:(error)=> {
						console.log(error)
					}
				})
			},
			// 小剧场上下滑动
			smallTheaterOnScroll(e) {  //没用到
				if(this.showLastVideo == false) {
					return
				}
				
				// console.log("开始滑动")
				clearTimeout(this.smallTheaterMonitorOnPageScrollTimer)
				
				if (this.showFullLastVideo == false) {
					this.smallTheaterMonitorOnPageScrollTimer = setTimeout(() => {
						// console.log("滑动结束")
						this.showFullLastVideo = true
					}, 500)
					return
				}
				
				this.showFullLastVideo = false
				this.smallTheaterMonitorOnPageScrollTimer = setTimeout(() => {
					// console.log("滑动结束")
					this.showFullLastVideo = true
				}, 500)
			},
			// 添加小程序操作
			addSmallProgramTipOperation() {   //没用到
				console.log(319)
				let self = this
				self.showAddSmallProgramTip = true
				// 6秒自动消失
				setTimeout(function() {
					if (self.showAddSmallProgramTip) {
						self.showAddSmallProgramTip = false
					}
				}, 6000);
			},
			// 点击添加小程序关闭
			clickToAddSmallProgramTipClose() { //没用到
				if (this.showAddSmallProgramTip) {
					this.showAddSmallProgramTip = false
				}
			}
		}
	}
</script>

<style>
	.swiper {
		height: 100%;
	}
	
	.suspensionAddSmallProgramTip{
		z-index:10000;
		position: fixed;
		width: 458rpx;
		height: 156rpx;
		top: 0;
		right: 50rpx;
	}
	
	.suspensionLastVideo{
		z-index:10001;
		width: 750rpx;
		height: 128rpx;
	}
	
	.showFullSuspensionLastVideo{
		transition: all 0.3s ease;
		transform: translateX(100%) !important;
	}
</style>

<style lang="scss" scoped>
	.content {
		width: 720rpx;
		height: 128rpx;
		border-radius: 6rpx;
		background-color: rgba(0, 0, 0, 0.4);
		.cover{
			display: flex;
			width: 80rpx;
			height: 100rpx;
			.image{
				width: 80rpx;
				height: 100rpx;
			}
		}
		.textMain{
		}
		.rechargeBtn{
			width:84px;
			height:74rpx;
			margin:0px 20rpx 0px 0px;
		}
		.continueLook{
			width: 100%;
			height: 40rpx;
			background-color: rgba(0, 0, 0, 0.8);
			color: #ffffff;
			font-size: 12px;
			text-align: center;
		}
		
	}
</style>